<template>
  <div class="block-box">
    <div class="corner-lb"></div>
    <div class="corner-rb"></div>
    <h3 class="task-title">
      飞行设备里程排名<img class="icon" :src="getImageUrl('leftbg10.png')" alt="" />
    </h3>
    <div class="task-num">
      <div class="task-list" v-for="(item, index) in rankingList" :key="index">
        <div class="para_box" style="width: 10%; text-align: center">
          <div :class="class_comp(index)">
            {{ fullindexs(index) }}
          </div>
        </div>
        <p style="width: 20%; text-align: center">{{ item.modelName || '-' }}</p>
        <p style="width: 30%; text-align: center">{{ item.droneName || '-' }}</p>
        <p style="width: 20%; text-align: center">{{ item.taskCount }}次</p>
        <p style="width: 20%; text-align: center">{{ item.totalTaskDistance }}m</p>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, defineProps, computed } from "vue";
const props = defineProps({ rankingList: Array });
const getImageUrl = (name: string) => {
  return new URL(`../../../../../assets/${name}`, import.meta.url).href;
};
const fullindexs = (index) => {
  let i = index + 1;
  return computed(() => (Number(i) < 10 ? "0" + i : i));
};
const class_comp = (index) => {
  let i = index + 1;
  return Number(i) <= 3 ? "para para" + i : "para";
};
</script>

<style lang="scss" scoped>
.block-box {
  background: rgb(2 19 20 / 52%);
  border: 1px solid;
  border-image: radial-gradient(circle,
      rgb(36 229 241 / 17%),
      rgb(255 255 255 / 17%)) 1 1;
  height: 41vh;
  margin-top: 0.5vh;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0px;
    width: 22px;
    height: 22px;
    border-top: 1px solid #24e5f1;
    opacity: 0.4;
  }

  &::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 22px;
    height: 22px;
    border-top: 1px solid #24e5f1;
    opacity: 0.4;
  }

  .corner-lb {
    content: "";
    position: absolute;
    bottom: -1px;
    left: -1px;
    width: 22px;
    height: 22px;
    border-bottom: 1px solid #24e5f1;
    border-left: 1px solid #24e5f1;
    opacity: 0.4;
  }

  .corner-rb {
    content: "";
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 22px;
    height: 22px;
    border-bottom: 1px solid #24e5f1;
    border-right: 1px solid #24e5f1;
    opacity: 0.4;
  }

  .task-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4vh;
    padding-left: 1.5vh;
    margin: 0;
    font-family: PingFangSC, "PingFang SC";
    font-size: 2vh;
    font-weight: 500;
    color: #fffefe;
    user-select: none;
    background: radial-gradient(ellipse 140% 300% at 100% 50%,
        rgba(1, 34, 35, 0.2) 28%,
        rgba(7, 217, 221, 0.7) 100%);

    .icon {
      width: 3vh;
      margin-right: 1vw;
    }
  }

  .task-num {
    padding: 1vh;
    height: 36vh;

    .task-list {
      display: flex;
      width: 100%;
      height: 5vh;
      align-items: center;
      padding: 1vh;

      .para_box {
        .para {
          position: relative;
          height: 2vh;
          width: 3vh;
          background-color: #045358;
          line-height: 2vh;
        }

        .para::before,
        .para::after {
          content: "";
          position: absolute;
          width: 0;
          height: 0;
          border-style: solid;
        }

        .para::before {
          height: 2vh;
          left: -1vh;
          border-width: 1vh 0.6vh;
          border-color: transparent #045358 #045358 transparent;
        }

        .para::after {
          height: 2vh;
          right: -1vh;
          border-width: 1vh 0.6vh;
          border-color: #045358 transparent transparent #045358;
        }

        .para1 {
          background-color: #eebf1b;
        }

        .para1::before {
          border-color: transparent #eebf1b #eebf1b transparent;
        }

        .para1::after {
          border-color: #eebf1b transparent transparent #eebf1b;
        }

        .para2 {
          background-color: #02b7c2;
        }

        .para2::before {
          border-color: transparent #02b7c2 #02b7c2 transparent;
        }

        .para2::after {
          border-color: #02b7c2 transparent transparent #02b7c2;
        }

        .para3 {
          background-color: #7c5bee;
        }

        .para3::before {
          border-color: transparent #7c5bee #7c5bee transparent;
        }

        .para3::after {
          border-color: #7c5bee transparent transparent #7c5bee;
        }
      }

      p {
        font-size: 1.5vh;
      }
    }
  }
}
</style>
